import React from 'react'
// 引入react-redux中的useDispatch, useSelector方法
import { useDispatch, useSelector } from 'react-redux';
// 引入getMovieAction
import { getMovieAction } from "../../store/slice/movieSlice";


export default function Movie() {
    // useDispatch()获取dispatch方法
    const dispatch = useDispatch()

    // useSelector获取count数据
    const count = useSelector(state => {
        return state.count.count
    })

    // useSelector获取movieList数据
    const movieList = useSelector(state => {
        return state.movie.movieList
    })

    // 获取电影数据的事件函数
    const getMovieList = () => {
        dispatch(getMovieAction())
    }
    return (
        <div>
            <h1>我是Movie组件</h1>
            <h2>我拿到的Count组件的值是{count}</h2>
            <button onClick={getMovieList}>获取电影的数据</button>
            <ul>
                {
                    movieList.map(item => {
                        return <li key={item.tvId}>{item.albumName}</li>
                    })
                }
            </ul>
        </div>
    )
}
